<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    max-height="580">
    <el-table-column
      fixed
      prop="username"
      label="用户名">
    </el-table-column>
    <el-table-column
      prop="banned"
      label="是否被封禁">
      <template slot-scope="scope">
        <p v-if="scope.row.banned==true">是</p>
        <p v-else>否</p>
      </template>
    </el-table-column >
    <el-table-column
      label="操作" width="120">
      <template slot-scope="scope">
        <el-button type="danger"
            round
          @click="remove(scope.$index, scope.row)">
          封禁用户
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from 'axios';
import store from '../../store';
  export default {
      name:"userList2",
      store,
      mounted(){//请求封禁用户名单
        var that = this;
        that.$axios.get('http://172.23.144.125:8081/house/v1/unban/'+store.state.id+'/'+store.state.token)
        .then(function(res){
          if(res.data.code=='200'){
            that.tableData=res.data.users
          }})
      },
      methods: {
        open() {
        this.$alert(this.messages.message, '提示', {
          confirmButtonText: '确定',
          type: 'success'
        })},
        open1() {
        this.$alert(this.messages.message, '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })},
      delete(index, rows) {
        this.tableData.splice(index, 1);
        },
      remove(index,rows){
      var that = this;
      that.$axios.put('http://172.23.144.125:8081/house/v1/users/'+store.state.id+'/'+store.state.token,{
          username:(index,rows).username
        }).then(res=>{
          if(res.data.code==200){
            that.messages.message='已封禁该用户';
            that.open();
            that.delete(index,rows)
          }
          else{
            that.messages.message='封禁失败';
            that.open1();
          }
        })
      },
      Inputchange(row) {
      this.$set(this.tableData,scope2.$index,scope2.row)
},
      searchId:function(){}
        },
        data() {
      return {
        tableData: [{
        }],
        messages:{
          message:''
        }
      }
    }
  }
</script>